<!--
   (c) Copyright 2015 Hewlett-Packard Development Company, L.P.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<table st-table="displayedItems"
       st-safe-src="items"
       hz-table class="table-striped table-rsp table-detail modern">
  <thead>
  <tr ng-show="showSearchBar">
    <th class="search-header" colspan="9">
      <hz-search-bar group-classes="input-group-sm" icon-classes="fa-search">
      </hz-search-bar>
    </th>
  </tr>
  <tr>
    <th class="expander"></th>
    <th st-sort="name" class="rsp-p1" translate>Name</th>
    <th st-sort="vcpus" class="rsp-p1" translate>VCPUS</th>
    <!-- Only show the default RAM sort on the available table -->
    <th ng-if="isAvailableTable" st-sort-default st-sort="ram" class="rsp-p1" translate>RAM</th>
    <th ng-if="!isAvailableTable" st-sort="ram" class="rsp-p1" translate>RAM</th>
    <th st-sort="totalDisk" class="rsp-p1" translate>Total Disk</th>
    <th st-sort="rootDisk" class="rsp-p2" translate>Root Disk</th>
    <th st-sort="ephemeralDisk" class="rsp-p2" translate>Ephemeral Disk</th>
    <th st-sort="isPublic" class="rsp-p2" translate>Public</th>
    <th></th>
  </tr>
  </thead>
  <tbody>
  <tr ng-if="displayedItems.length === 0">
    <td colspan="10">
      <div class="no-rows-help">
        {$ ::noneAvailableText $}
      </div>
    </td>
  </tr>
  <tr ng-repeat-start="item in displayedItems track by item.id"
      ng-if="showItemFunc(item)">
    <td class="expander">
      <span class="fa fa-chevron-right" hz-expand-detail
            title="{$ ::rowExpandText $}"></span>
    </td>
    <td class="rsp-p1">{$ ::item.name $}</td>
    <td class="rsp-p1">
      <span class="invalid fa fa-exclamation-triangle"
        ng-show="item.errors.vcpus"
        popover="{$ item.errors.vcpus $}"
        popover-placement="top" popover-append-to-body="true"
        popover-trigger="mouseenter mouseleave"/>
      {$ ::item.vcpus $}
    </td>
    <td class="rsp-p1">
      <span class="invalid fa fa-exclamation-triangle"
        ng-show="item.errors.ram"
        popover="{$ item.errors.ram $}"
        popover-placement="top" popover-append-to-body="true"
        popover-trigger="mouseenter mouseleave"/>
      {$ ::item.ram | mb $}
    </td>
    <td class="rsp-p1">{$ ::item.totalDisk | gb $}</td>
    <td class="rsp-p2">
      <span class="invalid fa fa-exclamation-triangle"
        ng-show="item.errors.disk"
        popover="{$ item.errors.disk $}"
        popover-placement="top" popover-append-to-body="true"
        popover-trigger="mouseenter mouseleave"/>
      {$ ::item.rootDisk | gb $}
    </td>
    <td class="rsp-p2">{$ ::item.ephemeralDisk | gb $}</td>
    <td class="rsp-p2">{$ ::item.isPublic | yesno $}</td>
    <td class="action-col">
      <action-list button-tooltip="item.disabledMessage"
          bt-model="tooltipModel"
          bt-disabled="!isAvailableTable || item.enabled"
          warning-classes="'invalid'">
        <notifications>
          <span class="fa fa-exclamation-triangle invalid"
            ng-show="isAvailableTable && !item.enabled"></span>
        </notifications>
        <action action-classes="'btn btn-sm btn-default'"
                callback="itemClickAction"
                item="item"
                disabled="isAvailableTable && !item.enabled">
          <span class="{$ ::itemButtonClasses $}"></span>
        </action>
      </action-list>
    </td>
  </tr>
  <tr ng-repeat-end class="detail-row" ng-if="showItemFunc(item)">
    <td></td>
    <td colspan="7" class="detail">
      <h5 translate>Impact on your quota</h5>
      <pie-chart chart-data="item.instancesChartData"
                 chart-settings="chartSettings"></pie-chart>
      <pie-chart chart-data="item.vcpusChartData"
                 chart-settings="chartSettings"></pie-chart>
      <pie-chart chart-data="item.ramChartData"
                 chart-settings="chartSettings"></pie-chart>
      <div ng-if="metadataDefs.flavor">
        <hr>
        <div class="row" ng-if="item.extras">
          <div class="col-sm-12">
            <metadata-display
              available="::metadataDefs.flavor"
              existing="::item.extras">
            </metadata-display>
          </div>
        </div>
      </div>
    </td>
    <td></td>
  </tr>
  </tbody>
</table>
